<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入 
* mapbox-gl-enhance (https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-12/mapbox-gl-enhance.js)
*********************************************************************-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title data-i18n="resources.title_mvtVectorLayer4326"></title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
    <script type="text/javascript" include="mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <script type="text/javascript">

      // 方式一：1.调用 mapboxgl.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
      mapboxgl.supermap
        .initMap('https://iserver.supermap.io/iserver/services/map-mvt-landuse/rest/maps/landuse', {
          type: 'vector-tile',
          mapOptions: {
            zoom: 13
          }
        })
        .then(function (result) {
          var map = result.map;
          new mapboxgl.Marker().setLngLat([108.9131417, 23.826245]).addTo(map);
          map.addControl(new mapboxgl.NavigationControl());
        })
        .catch((e) => {
          console.log(e);
        });

      // 方法二： 1. 注册坐标投影
      //         2. 直接用 mapboxgl.Map 初始化
      // var WKT = 'PROJCS["Xian 1980 / 3-degree Gauss-Kruger zone 38",GEOGCS["Xian 1980",DATUM["Xian_1980",SPHEROID["IAG 1975",6378140,298.257,AUTHORITY["EPSG","7049"]],AUTHORITY["EPSG","6610"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4610"]],PROJECTION["Transverse_Mercator"],PARAMETER["latitude_of_origin",0],PARAMETER["central_meridian",114],PARAMETER["scale_factor",1],PARAMETER["false_easting",38500000],PARAMETER["false_northing",0],UNIT["metre",1,AUTHORITY["EPSG","9001"]],AUTHORITY["EPSG","2362"]]'
      // var map = new mapboxgl.Map({
      //     container: 'map',
      //     style: 'https://iserver.supermap.io/iserver/services/map-mvt-landuse/rest/maps/landuse/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY',
      //     // mapboxgl.CRS(name,wkt,extent);
      //     // name：坐标系名称，必填
      //     // wkt：坐标系的WKT或者Proj4表述，必填。
      //     // extent: 当前坐标系范围，[左，下，右，上]
      //     crs: new mapboxgl.CRS('EPSG:2362', WKT, [32876993.777095847, -10001970.421227315, 52880934.61955048, 10001970.421227315]),
      //     center: [108.9118776, 23.8260365],
      //     zoom: 13,
      //     renderWorldCopies: false,

      // });
      // new mapboxgl.Marker().setLngLat([108.9131417, 23.826245]).addTo(map);
      // map.addControl(new mapboxgl.NavigationControl());
    </script>
  </body>
</html>
